<template>
  <div class="setting-content inside-comment">
    <el-scrollbar height="calc(100vh - 170px)">
      <div class="layout">
        <div class="top-tool">
          <el-tabs v-model="activeComment" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="最新留言" name="newComment"></el-tab-pane>
            <el-tab-pane label="热门留言" name="hotComment"></el-tab-pane>
            <el-tab-pane label="最新回复" name="newReplay"></el-tab-pane>
            <el-tab-pane v-if="userInfo" label="我的留言" name="myComment"></el-tab-pane>
          </el-tabs>
          <div class="keywords-search" >
            <el-select
              class="select-box"
              v-model="searchForm.formId"
              placeholder="选择留言板块"
              style="width: 120px"
              clearable
              @change="handleForm"
            >
              <el-option
                v-for="item in formList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                @click="handleFormChange(item)"
              />
            </el-select>
            <el-select
              class="select-box"
              v-model="searchForm.classifyFlow"
              placeholder="选择分类"
              style="width: 100px"
              clearable
              @change="handleGetFormManageList"

            >
              <el-option
                v-for="item in classifyFlow"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-input v-model="searchForm.keyword" placeholder="输入内容标题或正文关键词" @keyup.enter="onSubmit" clearable style="width: 200px"/>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
          </div>
        </div>
        <div class="comment-list">
          <template v-if="commentList?.length > 0">
            <div class="comment-item"  v-for="item in commentList" :key="item.id" @click="toDetail(item)">
                <div class="left-info">
                  <div class="classify" v-if="item.typeName">[{{item?.typeName}}]</div>
                  <div class="comment-name" >{{ item.content?.content[0]?.value }}</div>
                </div>
                <div class="right-time">
                  <div class="time">{{ dayjs(item?.publishTime).format("YYYY-MM-DD") }}</div>
                  <div class="isReply">
                    <el-tag v-if="item.isReply" type="success">已回复</el-tag>
                    <el-tag v-else type="warning">待回复</el-tag>
                  </div>
                </div>
            </div>
            <PaginationView
              :total="queryData.total"
              :pageSize="queryData.pageSize"
              :currentPage="queryData.currentPage"
              :pageChoose="isPageChooseBtn"
              :checkedNum="checkedNum"
              :canChoose="false"
              @changeSize="handleSizeChange"
              @currentChange="handleCurrentChange"
              @changePageChoose="handlePageChoose"
              @invertChoose="handleInvertChoose"
              @refreshList="handleGetFormManageList"
              class="pagination"
            />
          </template>
          <div v-else class="ruifox-table-new-no-data" >
            <slot name="noTableData">
              <!-- <i class="iconfont">&#xe642;</i> -->
              <svg t="1728460685872" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8472" width="70" height="70"><path d="M103.424 621.632h13.632c3.84 0 5.76 3.968 5.76 7.872 0 3.84-3.904 5.888-5.76 5.888h-13.632v13.696c0 3.776-4.032 5.76-5.888 5.76-1.92 0-3.904 0-5.888-1.984-1.92-1.856-1.92-1.856-1.92-3.776v-13.696h-13.696c-3.84 0-5.824-4.032-5.824-5.888 0-3.968 3.904-7.872 5.824-7.872h13.696v-13.696c0-3.904 3.904-5.824 7.808-5.824 3.84 0 5.888 1.92 5.888 5.824v13.696z m903.04-54.528v-13.76c0-1.856 0-4.032-1.856-4.032-2.048-1.856-3.904-1.856-5.952-1.856-3.904 0-5.824 1.856-5.824 5.888v13.76h-13.696c-1.92 0-3.968 0-5.76 1.728-1.984 2.112-1.984 4.032-1.984 5.888 0 4.032 3.84 6.08 5.824 6.08h13.76v13.568c0 3.776 3.84 5.888 5.76 5.888 4.032 0 7.872-3.968 7.872-5.888v-13.568h13.568c3.84 0 5.824-3.968 5.824-6.08 0-3.776-3.84-7.616-5.888-7.616h-11.648z m-497.344 224.192H163.776a13.888 13.888 0 0 1-9.728-3.968 14.592 14.592 0 0 1-3.84-9.728c0-7.808 5.824-13.504 13.568-13.504h62.4a63.296 63.296 0 0 1-7.744-27.392V340.736c0-13.632 5.888-29.248 15.616-38.976a54.144 54.144 0 0 1 38.976-15.616h41.024v-13.632c0-13.696 5.76-29.312 15.616-39.04a54.592 54.592 0 0 1 39.04-15.616h329.6c13.696 0 29.312 5.888 38.976 15.616a54.656 54.656 0 0 1 15.68 39.04v397.888a45.824 45.824 0 0 1-7.936 27.456h76.032c7.808 0 13.76 5.632 13.76 13.568a13.44 13.44 0 0 1-13.76 13.568h-163.84v13.632a44.544 44.544 0 0 1-7.68 27.392h7.68c7.936 0 13.76 5.824 13.76 13.568a13.44 13.44 0 0 1-13.76 13.76H585.088a26.688 26.688 0 0 1-3.84 33.088 25.024 25.024 0 0 1-19.456 7.936 25.024 25.024 0 0 1-19.584-7.936l-33.088-35.136z m50.624-27.2h43.008a26.816 26.816 0 0 0 27.328-27.392V338.816c0-15.616-11.84-27.328-25.536-27.328h-331.52a27.84 27.84 0 0 0-27.2 27.328v397.952c0 15.616 11.584 27.392 27.2 27.392h208.704l-7.808-7.936a29.184 29.184 0 0 1-7.808-27.392l-13.696-13.568a98.688 98.688 0 0 1-130.624-13.568 96.32 96.32 0 0 1 3.84-130.688 96.384 96.384 0 0 1 130.816-3.904c38.912 33.152 44.8 89.536 13.696 130.752l13.568 13.568a28.928 28.928 0 0 1 27.264 7.68l48.768 44.992z m97.536-68.288h41.024a26.688 26.688 0 0 0 27.264-27.328V270.592a26.624 26.624 0 0 0-27.264-27.328H370.56a26.624 26.624 0 0 0-27.2 27.328v15.616h259.456c13.632 0 29.184 5.824 38.848 15.616a54.272 54.272 0 0 1 15.616 38.976v355.008zM175.552 192.512h19.456c5.888 0 9.728 3.904 9.728 9.728s-3.84 9.792-9.728 9.792h-19.456v19.456c0 5.888-3.904 9.792-9.728 9.792-2.048 0-5.888-1.92-7.872-3.904s-1.92-3.904-1.92-7.808v-19.456h-21.44c-1.984 0-5.888 0-7.808-3.904-2.048-1.984-3.968-3.904-3.968-7.808 0-5.888 3.968-9.728 9.728-9.728h21.44v-19.584c0-5.888 3.968-9.728 9.728-9.728 5.888 0 9.728 3.84 9.728 9.728v23.424h2.112zM13.632 777.6c0-7.808 5.824-13.504 13.568-13.504h81.92c7.936 0 13.696 5.696 13.696 13.504 0 7.872-5.76 13.696-13.696 13.696H27.2a14.016 14.016 0 0 1-9.728-3.968 14.784 14.784 0 0 1-3.84-9.728z m433.024-87.68a68.288 68.288 0 0 0 0-97.536 68.288 68.288 0 0 0-97.536 0 68.352 68.352 0 0 0 0 97.536 68.16 68.16 0 0 0 97.536 0zM302.272 368.064c0-7.808 5.888-13.632 13.632-13.632h150.208a13.44 13.44 0 0 1 13.696 13.632 13.376 13.376 0 0 1-13.696 13.696H315.968a15.104 15.104 0 0 1-9.728-3.968c-3.968-3.84-3.968-7.744-3.968-9.728z m0 68.288c0-7.808 5.888-13.632 13.632-13.632H534.4a13.44 13.44 0 0 1 13.824 13.632 13.44 13.44 0 0 1-13.824 13.696H315.968a15.04 15.04 0 0 1-9.728-3.904c-3.968-3.968-3.968-5.824-3.968-9.792z m0 68.288c0-7.872 5.888-13.696 13.632-13.696H411.52a13.44 13.44 0 0 1 13.632 13.696 13.312 13.312 0 0 1-13.632 13.632H315.968a14.72 14.72 0 0 1-9.728-3.968c-3.968-1.856-3.968-5.76-3.968-9.664zM40.896 422.72c-15.616 0-27.264-7.808-35.072-21.44-7.808-13.632-7.808-29.312 0-40.96a40.896 40.896 0 0 1 35.072-21.44c23.488 0 41.024 17.536 41.024 40.96 0 23.296-17.536 42.88-41.024 42.88z m0-21.44a20.416 20.416 0 0 0 17.536-9.728 17.856 17.856 0 0 0 0-19.584c-3.84-7.872-9.728-11.712-17.536-11.712a21.632 21.632 0 0 0-21.376 21.504c1.92 11.648 9.792 19.52 21.376 19.52z m850.496-60.544c-15.552 0-29.44-7.744-35.072-21.44a38.464 38.464 0 0 1 0-40.96c7.68-11.776 21.376-21.44 35.072-21.44 23.36 0 40.96 17.536 40.96 40.96-0.064 23.424-19.456 42.88-40.96 42.88z m0-21.44a20.736 20.736 0 0 0 17.536-9.728c3.968-5.888 3.968-13.696 0-21.44a20.48 20.48 0 0 0-17.536-9.728 21.568 21.568 0 0 0-21.44 21.376c0 9.792 9.728 19.52 21.44 19.52z m0 0" fill="#515151" p-id="8473"></path></svg>
              <span>暂无数据</span>
            </slot>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { useRouter } from 'vue-router';
import { selectPageToUserCommentMessages } from "@/api/comment";
import { selectListCommentForm } from "@/api/form";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
import { tableList as mixTable } from "@ruifox-cms/utils";
import { useStore } from 'vuex'

//获取当前用户信息 
const store = useStore(); 
const userInfo = ref();
userInfo.value = store.state.base.userInfo;

const router = useRouter(); // 获取路由器实例
//tab切换
const activeComment = ref("newComment");
const handleClick = async (tab) => {
  let name = tab.props.name;
  activeComment.value = name;
  if(activeComment.value == 'newComment'){
    searchForm.value = JSON.parse(JSON.stringify(props.defaultQuery));
  } else if(activeComment.value == 'hotComment'){
    searchForm.value = JSON.parse(JSON.stringify(props.defaultQuery));
    searchForm.value.isTop = 1
  } else if(activeComment.value == 'myComment'){
    searchForm.value = JSON.parse(JSON.stringify(props.defaultQuery));
    searchForm.value.isOnlyMine = 1
  } else {
    searchForm.value = JSON.parse(JSON.stringify(props.defaultQuery));
    searchForm.value.isReplay = 1
    queryData.isReply = 1;
  }
  handleGetFormManageList()
};

//分页器
const {
  queryData,
  checkedNum,
  tableData: oriTableData,
  //   handleSearch,
  handleCurrentChange,
  handleSizeChange,
  handlePageChoose,
  handleInvertChoose,
} = mixTable({
  getListApi: selectPageToUserCommentMessages,
});

const props = defineProps({
  defaultQuery: {
    type: Object,
    default: () => {
      return {
        keyword: "", 
        isTop: "", 
        currentPage: 1,
        pageSize: 15,
        total:"",
        isOnlyMine:"",
        isReplay:"",
        formId:"",
        classifyFlow:""
      };
    },
  },
});
const searchForm = ref(JSON.parse(JSON.stringify(props.defaultQuery)));
const commentList = ref([])

Object.assign(queryData, JSON.parse(JSON.stringify(props.defaultQuery)));
// const loading = ref(true);
// const error = ref(false);
//获取留言数据
const handleGetFormManageList = async () => {
  try {
    let params = searchForm.value;
    if (params.classifyFlow == "") {
      delete params.classifyFlow;
    }
    let res = await selectPageToUserCommentMessages(params);
    refreshList(res.data)
  } catch (error) {
    // error.value = true;
    ElMessage.error("获取数据失败");
  } 
};
const refreshList = (data) => {
  searchForm.value.total = data.total;
  commentList.value = data.list;
  watch(oriTableData, () => {
    commentList.value = oriTableData.value;
  });
  refreshPage(data)
}
// handleGetFormManageList()

//更新分页器
const refreshPage = (data) => {
  queryData.total = data.total;
  queryData.pageSize = data.pageSize;
  queryData.currentPage = data.currentPage;
}

//获取留言表单
const formList = ref([])
const classifyFlow = ref([])
const getForm = async () => {
  const res = await selectListCommentForm({currentPage:1,pageSize:10,isEnabled: 1})
  if (res.code === 20000) {
    formList.value = res.data.list
  }
}
const handleFormChange = (item) => {
  if (item.classifyFlow.length > 1) {
    classifyFlow.value = item.classifyFlow
  }
}
const handleForm = () => {
  searchForm.value.classifyFlow = "";
  handleGetFormManageList()
}
getForm()
//搜索
const onSubmit = () =>{
  handleGetFormManageList()
}
// 点击跳转详情页
const toDetail = (item) => {
  router.push({ 
    path: '/comment/user/commentDetail', 
    query: { 
      id: item.id,
      isReply: item.isReply
    } 
  });
};

onMounted(() => {
  handleGetFormManageList()
});

</script>

<style scoped lang='scss'>
.setting-content{
  margin: 60px auto 0;
  max-height: calc(100vh - 150px);
  @media (max-width:1240px) {
    .layout{
      padding: 0 10px;
      box-sizing: border-box;
    }
  }
  /* overflow-y: scroll; */
}
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
.top-tool{
  display: flex;
  justify-content: space-between;
  ::v-deep .el-tabs__item{
    font-size: 20px;
  }
  .keywords-search{
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    button{
      margin-left: 15px;
    }
  }
  .select-box{
    margin-right: 10px;
  }
}
.comment-item{
  box-sizing: border-box;
  padding: $padding-small;
  display:flex;
  justify-content: space-between;
  align-items: center;
  font-size:16px;
  margin-bottom: 15px;
  box-shadow: 0 0 5px #eee;
  cursor: pointer;
  color: $black;
  &:hover{
    .left-info .comment-name{
      color: $mainColor;
    }
  }
  .left-info{
    flex:1;
    display: flex;
    align-items: center;
    max-width: calc(100% - 150px);
    .classify{
      color: $mainColor;
      margin-right: 10px;
    }
    .comment-name{
      /* max-width: calc(100% - 60px); */
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      white-space: normal;
    }
  }
  .right-time{
    display: flex;
    align-items: center;
    color: #666;
    font-size: 14px;
    .isReply{
      margin-left: 10px;
    }
    .isRead{
      margin-left: 10px;
      .hide-tag{
        opacity: 0;
        visibility: hidden;
      }
    }
  }
}
.ruifox-table-new-no-data{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
  width: 100%;
  height: 100px;
  /* border-bottom: 1px #e3e4e6 solid; */
  svg{
    flex-shrink: 0;
    path{
      fill: #AAAAAA;
    }
  }
  &>i{
    font-size: 80px;
    color: #AAAAAA;
  }
  &>span{
    font-size: 12px;
    color: #AAAAAA;
  }
}
@media (max-width:960px) {
  .top-tool{
    display: block;
    ::v-deep .el-tabs__item{
      font-size: 16px;
      padding: 0 10px;
    }
    .keywords-search{
      margin-bottom: 10px;
      button{
        margin-left: 5px;
      }
    }
    .select-box{
      margin-right: 5px;
    }
  }
  .comment-item{
    .left-info{
      width: calc(100% - 80px);
    }
    .right-time .isReply{
      display: none;
    }
  } 
}
</style>
